//虎牙视频分类视频综合评分（功能20）
<template>
  <div>
    <blockquote>数据截止至2021年8月18日晚上7:00</blockquote>
    <div id="function20" :style="{ width: '1000px', height: '700px' }" />
  </div>
</template>
<script>
import stores from "@/store";
export default {
  mounted() {
    this.$axios
      .post(stores.spring_url + "/videoarea", "hahahaha")
      .then((res) => {
        console.log(res);
        this.init(res.data.data);
      });
  },
  methods: {
    init(res) {
      const myChart = this.$echarts.init(document.getElementById("function20"));
      const chartData = [];
      for (let i of res) {
        //console.log(i)
        chartData.push({ name: i.area, value: i.score });
      }
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "分区",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: chartData,
          },
        ],
      });
    },
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>